<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<body>
  <div id="home">
    <div style="display: flex;">
      <el-row class="tac">
        <el-col :span="6">
          <el-menu class="el-menu-vertical-demo" background-color="#471306" text-color="#fff"
            active-text-color="#ffd04b" style="height: 100vh; width: 300px; padding: 55% 15%;">
            <el-menu-item>
              <img src="../img/logo3.png" width="150px" alt="">
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./home.html">首页</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./addgoods.html">添加食材</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./orders.html">订单管理</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./user.html">用户管理</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./message.html">留言管理</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./contact.html">联系管理</a></span>
            </el-menu-item>
            <el-menu-item>
              <span slot="title"><a href="./userinfo.html">个人信息</a></span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div style="width: 100%; background: url(../img/bg.jpg) no-repeat; background-size: 100% 100%;">
        <div
          style="background-color: #471306;height: 80px; width: 100%;overflow: hidden;padding-top: 1.3%; padding-left: 5%;">
          <div style="display: flex;">
            <h2 style="color: #fff; margin-right: 3%;">食材管理</h2>
            <div>
              <el-input v-model="name" placeholder="请输入食材名" style="width: 300px;"></el-input><el-button plain
                @click="search()">搜索</el-button>
            </div>
            <div style="margin-left: auto;margin-right: 10%;padding-top: 0.5%;">
              <span slot="title"><a href="./login.html">退出登录</a></span>
            </div>
          </div>
        </div>
        <div style="padding: 5% 10%;">
          <!-- 主体内容 -->
          <div style="background-color: #fff;padding: 10px;min-height: 600px">
            <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"
              :header-cell-style="{background:'#4d4c50',color:'#fff'}">
              <el-table-column prop="id" label="id" sortable>
              </el-table-column>
              <el-table-column prop="name" label="食材名" sortable>
              </el-table-column>
              <el-table-column width="100" label="食材图片">
                <template slot-scope="scope">
                  <img v-if="scope.row.img" width="100%" :src="url+'/download/'+scope.row.img">
                </template>
              </el-table-column>
              <el-table-column prop="price" label="食材单价">
              </el-table-column>
              <el-table-column prop="inventory" label="食材库存">
              </el-table-column>
              <el-table-column prop="type" label="食材分类">
              </el-table-column>
              <el-table-column prop="ntoes" label="食材说明">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- @click="handleEdit(scope.$index, scope.row)" -->
                  <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="background-color: #fff; text-align: right; padding: 10px 0;">
              <el-pagination layout="prev, pager, next" :current-page="current" :total="total"
                @current-change="currentPage" :page-size="6">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 删除弹窗 -->
    <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
      <span>你确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userDelete()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑食材" :visible.sync="dialogVisible2" width="60%">
      <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="食材名" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="食材图片" prop="img">
          <el-upload class="avatar-uploader" :action="url+'/upload'" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="url+'/download/'+imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="食材说明" prop="ntoes">
          <el-input type="text" v-model="ruleForm.ntoes"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input type="text" v-model="ruleForm.inventory"></el-input>
        </el-form-item>
        <el-form-item label="食材类型">
          <el-select v-model="ruleForm.type" placeholder="食材类型">
            <el-option label="荤菜" value="荤菜"></el-option>
            <el-option label="素菜" value="素菜"></el-option>
            <el-option label="锅底" value="锅底"></el-option>
            <el-option label="小吃" value="小吃"></el-option>
            <el-option label="饮料" value="饮料"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input type="text" v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="dialogVisible2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</body>
<script>
  new Vue({
    el: '#home',
    data() {
      return {
        ruleForm: {},
        name: '',
        dialogVisible: false,
        dialogVisible2: false,
        current: 1,
        total: 1,
        deleteId: 0,
        tableData: [],
        imageUrl: '',
        url: 'http://localhost:9092/common',
      }
    },
    created() {
      if (localStorage.getItem("userId") == null) {
        window.location.href = './login.html';
        return;
      }
      this.page_init();
    },
    methods: {
      // 确定编辑
      async submitForm() {
        this.ruleForm.img = this.imageUrl;
        const { data: result } = await this.$http.post('http://localhost:9092/hot_goods/update', this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible2 = false;
        this.page_init();
      },
      // 编辑
      handleEdit(row) {
        this.imageUrl = row.img;
        this.dialogVisible2 = true;
        this.ruleForm = row;
      },
      // 搜索
      async search() {
        // 判断用户是否有输入数据
        if (this.name == "") {
          // 相当于刷新页面
          this.page_init();
        }
        const { data: result } = await this.$http.get('http://localhost:9092/hot_goods/search/' + this.current + '/' + this.name);
        if (result.flag) {
          // 搜索的数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
      // 确认删除
      async userDelete() {
        const { data: result } = await this.$http.get('http://localhost:9092/hot_goods/delete/' + this.deleteId);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible = false;
        this.page_init();
      },
      // 删除
      handleDelete(row) {
        // 打开弹窗
        this.dialogVisible = true;
        // 赋值需要删除的用户id
        this.deleteId = row.id;
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        if (this.name == "") {
          // 当不搜索的时候，会调用这个方法
          this.page_init();
        } else {
          // 当搜索的时候会调用这个方法
          this.search();
        }
      },
      // 刷新页面
      async page_init() {
        const { data: result } = await this.$http.get('http://localhost:9092/hot_goods/page/' + this.current);
        if (result.flag) {
          // 赋值数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总页面
          this.total = result.total;
        } else {
          this.$message.error(result.message)
        }
      }
    }
  })
</script>

</html>